<template>
  <div style="padding-bottom: 80px">
    <div class="swiper-parrent-box">
      <div class="header_box" ref="Subunit7Child4">
        <div class="boxs-top" style="margin-top: 15px">
          <titles :title="props.info.text" />
        </div>
        <div class="boxs-dirction">
          <textMax :data="props.info.remarks" :maxLen="145" />
        </div>
      </div>
      <div class="dot-box" :class="'solid-border' + store.styleInfo.colorType">
        <div
          class="dot-box-left"
          :style="{
            opacity: current === 0 ? '0' : '1',
          }"
          style="cursor: pointer"
          @click="putCruuent(-1)"
        >
          <i
            v-if="store.styleInfo.styleType == 1"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe611;
          </i>
          <i
            v-if="store.styleInfo.styleType == 2"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe616;
          </i>
          <i
            v-if="store.styleInfo.styleType == 3"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe615;
          </i>
          <i
            v-if="store.styleInfo.styleType == 4"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe618;
          </i>

          <span
            :style="{
              color: store.styleInfo.shmentColor,
            }"
          >
            上一个
          </span>
        </div>
        <div
          class="dot-box-right"
          :style="{
            opacity: current === list.length - 1 ? '0' : '1',
          }"
          style="cursor: pointer"
          :class="'solid-border' + store.styleInfo.colorType"
          @click="putCruuent(1)"
        >
          <span
            :style="{
              color: store.styleInfo.shmentColor,
            }"
          >
            下一个
          </span>
          <i
            v-if="store.styleInfo.styleType == 1"
            class="iconfonts"
            :style="{
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe612;
          </i>
          <i
            v-if="store.styleInfo.styleType == 2"
            class="iconfonts"
            :style="{
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe606;
          </i>
          <i
            v-if="store.styleInfo.styleType == 3"
            class="iconfonts"
            :style="{
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe617;
          </i>
          <i
            v-if="store.styleInfo.styleType == 4"
            class="iconfonts"
            :style="{
              fontSize: '24px',
              color: store.styleInfo.shmentColor,
            }"
          >
            &#xe614;
          </i>
        </div>
      </div>
      <div ref="leftContent" class="left-content" :style="{ transform: `translateX(${-400 * (current - 1)}px)` }">
        <div
          ref="scrollItem"
          class="scroll-item"
          :style="{
            left: (380 + 20) * index + 'px',
            opacity: current == index || current - 1 == index || current + 1 == index ? '0' : '1',
          }"
          @mouseenter="imgEnter(index, list)"
          @mouseleave="imgLeave(index, list)"
          @click="pathChild(props.info, index)"
          style="cursor: pointer"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="item-img">
            <div class="scroll-item-img" :class="'scroll-item-img' + item.id">
              <t-image
                style="cursor: pointer"
                v-if="item.value"
                @click="pathChild(props.info, index)"
                :style="{
                  height: '480px',
                }"
                :src="
                  item.value
                    ? urls +
                      item.value +
                      (current == index
                        ? '?imageView2/1/w/380/h/480/format/webp'
                        : '?imageView2/1/w/380/h/480/format/webp')
                    : 'http://101.34.143.36:8890/api/image/387939155165253/t_2,h_480,w_380'
                "
                alt=""
              />
              <UnitImageNull
                v-else
                :style="{
                  height: '480px',
                }"
                @click="pathChild(props.info, index)"
                style="cursor: pointer"
              ></UnitImageNull>
              <div
                class="shadow"
                :style="{
                  height: current == index ? '480px' : '380px',
                  marginTop: current == index ? '0' : '100px',
                }"
              ></div>
            </div>

            <div class="text">
              <div style="height: 30px">
                <span
                  class="titleText"
                  :class="'titleText' + item.id"
                  :style="{
                    fontSize: store.styleInfo.mintitleSize,

                    color: store.styleInfo.fontColor,
                  }"
                  >{{ item.text }}</span
                >
              </div>
              <div class="line" :class="'line' + item.id"></div>
              <div class="leftTitle">
                <span
                  :style="{
                    fontSize: store.styleInfo.contentSize,
                    fontFamily: store.styleInfo.textFamily,
                    color: store.styleInfo.fontColor,
                  }"
                  >{{ item.remarks }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, onMounted } from 'vue';
import { pathList, pathListLoop } from '../route';
import arrowLeft from '../publicComponents/components/arrowLeft.vue';
import arrowRight from '../publicComponents/components/arrowRight.vue';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import textMax from '@/components/textMax/textMax.vue';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
// import { handlemouse } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { imgEnter, imgLeave } from './component/hover';
const router = useRouter();
const route = useRoute();
const Subunit7Child4 = ref(null);
const scrollItem = ref(null);
const leftContent = ref(null);
const list = ref([]);
const current = ref(0);
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
});
list.value = props.info.children;
// console.log(props.info.children);

const putCruuent = (type, index) => {
  if ((current.value === list.value.length - 1 && type === 1) || (current.value === 0 && type === -1)) {
    return;
  } else {
    current.value += type;
    setTimeout(() => {
      var scrollImg = document.querySelectorAll(`.scroll-item-img${list.value[current.value].id}`);
      for (let index = 0; index < list.value.length; index++) {
        var scrollImg2 = document.querySelectorAll(`.scroll-item-img${list.value[index].id}`);
        console.log(scrollImg2);

        scrollImg2[0].style.height = '380px';
        scrollImg2[0].style.marginTop = '100px';
      }
      scrollImg[0].style.height = '480px';
      scrollImg[0].style.marginTop = '0px';
    }, 300);
  }
};
const pathChild = (e: any, index) => {
  console.log(e);

  store.setchildModel(e);
  router.push({
    path: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { projectId: localStorage.getItem('projectId'), current: index },
  });
};
onMounted(() => {
  // handlemouse('boxs-content-scroll');
  if (list.value.length > 0) {
    let scrollImg = document.querySelectorAll(`.scroll-item-img${list.value[current.value].id}`);
    console.log('scrollImg', scrollItem);

    for (let index = 0; index < list.value.length; index++) {
      var scrollImg2 = document.querySelectorAll(`.scroll-item-img${list.value[index].id}`);
      // console.log(scrollImg2);

      scrollImg2[0].style.height = '380px';
      scrollImg2[0].style.marginTop = '100px';
    }
    scrollImg[0].style.height = '480px';
    scrollImg[0].style.marginTop = '0px';
  }
  animation();
  animation2();
});

const animation = () => {
  let canTrigger = true; // 标记是否可以触发

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码s
        // console.log('c', exhibitsBox.value);
        Subunit7Child4.value.classList.add('animation-box');

        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        if (Subunit7Child4.value) {
          Subunit7Child4.value.classList.remove('animation-box');
        }
      }
    });
  });
  observer.observe(Subunit7Child4.value);
};
const animation2 = () => {
  let canTrigger = true; // 标记是否可以触发
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码s
        console.log('c', scrollItem.value);

        for (let index = 0; index < scrollItem.value.length; index++) {
          console.log(index);

          setTimeout(() => {
            scrollItem.value[index].classList.add('animation-box2');
          }, 300 * (index + 1));
        }
        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        if (scrollItem.value) {
          for (let index = 0; index < scrollItem.value.length; index++) {
            scrollItem.value[index].classList.remove('animation-box2');
          }
        }
      }
    });
  });
  observer.observe(leftContent.value);
};
</script>

<style scoped lang="less">
@import './index.less';
@import './Subunit7Child4.less';
</style>
